<template>
  <div class="topbar">
    <div class="left">
      <img
        src="./../assets/logo.jpg"
        height="412"
        width="1689"
        @click="toIndex"
      />
      <div>
        <span
          class="index"
          @click="toIndex"
          :class="{ change: '/welcome' === $route.path }"
        >
          <i style="" class="iconfont icon-shouye-shouye"></i>
          <span>首页</span>
        </span>
        <span>{{ username }}，周末的晚霞，别有一番风景</span>
      </div>
    </div>
    <div class="right">
      <el-dropdown trigger="click" >
        <span
          class="el-dropdown-link"
          :class="{
            change: getMenuTop.map((v) => v.url).includes($route.path),
          }"
        >
          <i class="iconfont icon-xitong"></i>
          设置
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            @click.native="$route.path !== item.url && $router.push(item.url)"
            v-for="item in getMenuTop"
            :key="item.id"
          >
            <span
              class="iconfont"
              :class="[item.ico, { change: item.url === $route.path }]"
            >
              <span class="menuName">
                {{ item.name }}
              </span>
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span @click="outLogin">
        <i class="iconfont icon-tuichu"></i>
        <span>退出登录</span>
      </span>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "topbar",
  methods: {
    outLogin() {
      this.$confirm("确定要退出登录吗?", "提示", {
        center: true,
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          this.$store.commit("menu/SET_LIST", []);
          this.$router.push("/");
        })
        .catch(() => {});
    },

    //跳转首页
    toIndex() {
      this.$route.path !== "/index" && this.$router.push({ path: "/index" });
    },
  },
  //计算属性
  computed: {
    ...mapState({
      username: state => state.user.username
    }),
    ...mapGetters({ getMenuTop: "menu/getMenuTop" }),
  },
};
</script>

<style lang="less">
.el-header {
  width: 100%;
  background-color: #f4f4f4;
  position: fixed;
  z-index:10;
}
.topbar {
  // position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.menuName {
  font-size: 14px;
}
.icon-wodefangwu {
  font-size: 18px;
}
.el-header {
  background: #f4f4f4;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #24303e;

  .left {
    font-size: 14px;
    display: flex;
    align-items: center;

    img {
      margin-right: 25px;
      width: 130px;
      height: 30px;
      cursor: pointer;
    }
    div {
      display: flex;
      .index {
        cursor: pointer;
        margin-right: 20px;
        display: flex;
        i {
          color: #727e97;
          margin-right: 5px;
        }
      }
    }
  }
  .right {
    cursor: pointer;
    .el-dropdown {
      margin-right: 60px;
      i {
        font-size: 18px;
        margin-right: 5px;
      }
    }
    span {
      font-size: 14px;
      i {
        font-size: 16px;
        margin-right: 13px;
        vertical-align: middle;
        color: #8591a7;
      }
    }
  }
}
.change {
  color: #4180f3 !important;
  i {
    color: #4180f3 !important;
  }
}
</style>